﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wap/Shop/ShopSite.Master" AutoEventWireup="true"  CodeBehind="ProductList.aspx.cs" Inherits="ZLCMS.Web.Wap.Shop.ProductList" %>

<%@ Import Namespace="ZLCMS.Business.Util" %>

<%@ Register src="Footer.ascx" tagname="Footer" tagprefix="uc1" %>
<%@ Register src="UC_ShopNavBar.ascx" tagname="UC_ShopNavBar" tagprefix="uc2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title><%= ParamKit.GetValue("ProductType", Request["categoryid"], "商品目录") %></title>
    <!--E banner-->

    <style type="text/css">
	.ui-panel-dismiss-open.ui-panel-dismiss-position-right{background:rgba(0, 0, 0, 0.5)!important; filter:Alpha(opacity=50); }
	#mypanel{ box-shadow:none;}
    
	#nav li{ border-left:1px solid #ddd;box-sizing: border-box;  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border-bottom:1px solid #ddd;}
	#nav li:nth-child(1){ border-left:none;}
	#navFixed .ui-navbar ul li a{ line-height: 24px;}
	#navFixed .ui-navbar ul li a.ui-btn-active{ color:#f9384d; border-bottom-color:#f9384d;}
	
    </style>
    
    <!--panel 打开时禁止滚动-->
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="pages" runat="server">
    <!--S page -->
<div data-role="page" id="mypage" style="background-color:#fff">
	<!--S header -->
	<div data-role="header" data-position="fixed"  data-tap-toggle="false">
    	<%--<table width="98%" border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td class="choosebtn" style="width:20%;display:none"><a href="#choosepanel" data-role="button"><img src="images/header_class.png"  ></a></td>
            <td style="padding-left:5px"><input type="search" id="keyword" placeholder="请输入搜索关键词" value="<%=Request["keyword"] %>"></td>
            <td><input name="" type="button" value="搜索" onclick="queryData();"></td>
          </tr>
        </table>--%>
        <input type="hidden" id="keyword" placeholder="请输入搜索关键词" value="<%=Request["keyword"] %>">
	</div>
    <!--E header -->
	
    <!--S content -->
	<div role="main" class="ui-content">
        <div class="prolist_nav">
        <input type="hidden" id="orderfield"/>
        <input type="hidden" id="orderdirection"/>
        <div data-role="navbar" style="display: none;">
            <ul class="orders">
            <li order="SalePrice" dir='<%= string.IsNullOrEmpty(Request["SalePrice"]) ? "0" : Request["SalePrice"]  %>'><a data-theme="m" href="javascript:void(0)">价格</a></li>
            <li order="SellCount" dir='<%= string.IsNullOrEmpty(Request["SellCount"]) ? "0" : Request["SellCount"]  %>'><a data-theme="m" href="javascript:void(0)">销量</a></li>
            <li order="GroundingTime" dir='<%= string.IsNullOrEmpty(Request["GroundingTime"]) ? "0" : Request["GroundingTime"]  %>'><a data-theme="m" href="javascript:void(0)">上架时间</a></li>
            </ul>
        </div>
    </div>

    	<!--s nav-->
        <div id="navFixed" style="margin-bottom: 5px;" >
        <div id="nav">
        	<div data-role="navbar" nav="navFixed">
              <ul>
                <li><a href="/Wap/Shop/productlisttmp.aspx?categoryid=169&keyword=海淘&bq=1" data-theme="f" <%=Request["bq"]=="1"?"class='ui-btn-active'":"" %> data-ajax="false" >护肤</a></li>
                <li><a href="/Wap/Shop/productlisttmp.aspx?categoryid=168&keyword=海淘&bq=2" data-theme="f" <%=Request["bq"]=="2"?"class='ui-btn-active'":"" %> data-ajax="false" >彩妆</a></li>
                <li><a href="/Wap/Shop/productlisttmp.aspx?categoryid=170&keyword=海淘&bq=3" data-theme="f" <%=Request["bq"]=="3"?"class='ui-btn-active'":"" %> data-ajax="false" >洗护</a></li>
                <li><a href="/Wap/Shop/productlisttmp.aspx?categoryid=156&keyword=海淘&bq=4" data-theme="f" <%=Request["bq"]=="4"?"class='ui-btn-active'":"" %> data-ajax="false" >零食</a></li>
                <li><a href="/Wap/Shop/productlisttmp.aspx?categoryid=155&keyword=海淘&bq=5" data-theme="f" <%=Request["bq"]=="5"?"class='ui-btn-active'":"" %> data-ajax="false" >冰鲜</a></li>
              </ul>
            </div>
        </div>
        </div>
        <!--e nav-->

        <!--s proList-->
        <div class="proList" >
        	<ul id="searchResult">

            </ul>
            <div style="display:none">
                <button id="btnMore" data-icon="refresh" style="width: 95%; margin-left: auto; margin-right: auto;">显示更多</button>
            </div>
        </div>
        <!--e proList-->
        
    </div>
    <!--E content -->
	
    <!--S footer -->
	<div data-role="footer" data-position="fixed" data-tap-toggle="false">    
        <uc1:Footer ID="Footer1" runat="server" />    
    </div>
    <!--E footer -->
</div>
<!--E page -->
  
<script src="/wap/lib/common/listviewHandler.js" type="text/javascript"></script>
<script src="js/searchPropHandler.js" type="text/javascript"></script>

<script type="text/javascript">
    var searchPropList = [];
    $('ul.orders li[order]').click(function () {
        var imgSrc = 'images/sxtop_icon.png';
        if ($(this).attr('dir') == '0') {
            $('ul.orders li[order]').each(function () {
                $('a>img', $(this)).remove();
                $(this).attr('dir', '0');
            });
            $('a', $(this)).prepend('<img src="">');
        }

        if ($(this).attr('dir') == 'desc') {//升序改为降序
            $(this).attr('dir', 'asc');
            imgSrc = 'images/sxbottom_icon.png';
        } else {//默认降序
            $(this).attr('dir', 'desc');
            imgSrc = 'images/sxtop_icon.png';
        }

        $('a>img', $(this)).attr('src', imgSrc);
        queryData();
    });

    function queryData() {
        var handler = $('#searchResult').listviewHandler();
        
        var itemTemplateS1 = '<li class="tmps1" onclick="location.href=\'/Wap/Shop/ProductDetail.aspx?no={ProductNo}\'">'
                	+ '<div class="img"><img src="{ThumbnailImg}">'
                    + '<div class="tit">'
                    + '<div class="left">{ProductName}</div>'
                    + '<div class="right">已售 <span>{SellCount}</span></div>' //<a href="/Wap/Shop/ProductDetail.aspx?no={ProductNo}" data-ajax="false"><img src="images/cart_icon.png"></a>
                    + '<div class="clear"></div>'
                    + '</div>'
                    + ' </div>'
                    + '<p>￥{SalePrice}</p>'
                + '</li>';

        var itemTemplateS2 = '<li class="tmps2" onclick="location.href=\'/Wap/Shop/ProductDetail.aspx?no={ProductNo}\'">'
                	+ '<div class="pimg"><img class="pimgc" src="{ThumbnailImg}" style="{tmps2imgHW}" />{IsForSale}{sellouttips}</div>'
//                    +'<div class="pimg {sellout}" style="background:url({ThumbnailImg}) no-repeat; background-size:cover;">{sellouttips}</div>'
                    +'<div class="txt">{ProductName}</div>'
                    +'<div class="txt txtsum">{ShortDesc}</div>'
                    + '<div class="tit">'
                    + '<div class="left"><i>￥</i>{SalePrice}</div>'
                    + '<div class="right">已售 <span>{SellCount}</span></div>'  //<a href="/Wap/Shop/ProductDetail.aspx?no={ProductNo}" data-ajax="false"><img src="images/cart_icon.png"></a>
                    + '<div class="clear"></div>'
                    + '</div>'
                + '</li>';

        var itemTemplateS3 = '<li class="tmps3" onclick="location.href=\'/Wap/Shop/ProductDetail.aspx?no={ProductNo}\'">'
                    +'<div class="Left {sellout}" style="background:url({ThumbnailImg}) no-repeat; background-size:cover;">{sellouttips}</div>'
                    +'<div class="Right">'
                    +'<div class="txt">{ProductName}</div>'
                    +'<div class="txt txtsum">{ShortDesc}</div>'
                    + '<div class="tit">'
                    + '<div class="left"><i>￥</i>{SalePrice}</div>'
                    + '<div class="right">已售 <span>{SellCount}</span></div>'  //<a href="/Wap/Shop/ProductDetail.aspx?no={ProductNo}" data-ajax="false"><img src="images/cart_icon.png"></a>
                    + '<div class="clear"></div>'
                    + '</div>'
                    +'</div>'
                +'</li>';


        var tempStyle = itemTemplateS<%= Request["tmps"] == null ? "2" : Request["tmps"] %>;
        var tmpsId = <%= Request["tmps"] == null ? "2" : Request["tmps"] %>
        var imgHW4tmps2 = 0;
        if(tmpsId == "2"){        
            imgHW4tmps2 = parseInt(($('#searchResult').width() -10 )/2);
        }

        handler.initialize({
            loaderBtn: $('#btnMore'), //加载数据按钮（点击加载下一页）
            emptyHtml: '无记录', //无记录时显示此html
            itemTemplate: tempStyle, //项模板
            pageIndex: 1, //页码（从1起算）
            pageSize: 10, //页大小
            totalCount: 999, //总记录数
            itemHandler: function (data, itemTemplate, container) {//数据各项处理
                data.ThumbnailImg = firstThumbnail(data.ThumbnailImg);

                data.sellout = '';
                data.sellouttips = '';

                if(data.Storage <= 0){
                    //暂时不能支持
                    data.sellout = 'sellout';
                    data.sellouttips = '<div class="sellout">售罄</div>';
                    //$('.tmps3 .left').addClass('sellout');
                }

                if( data.IsForSale != null && data.IsForSale != ''){
                    data.IsForSale = '<img class="picon" src="'+ firstFilePath(data.IsForSale) + '" />';
                }

                if(tmpsId == "2"){ 
                    data.tmps2imgHW = 'width:'+ imgHW4tmps2 + "px; height:" + imgHW4tmps2 + "px;";  
                }

                return itemTemplate.format(data);
            },
            command: 'Pub.LoadProductList',
            parameter: { Keyword: $('#keyword').val(),SearchPropList:searchPropList, CategoryId: '<%=Request["categoryId"] %>', OrderField: $('ul.orders li[dir!="0"]').attr('order'), OrderDirection: $('ul.orders li[dir!="0"]').attr('dir') }
        });
        handler.nextPage();
    }

    function querySearchProp() {
        searchPropList = $('.searchpropcontainer').searchPropHandler().getResult();
        $("#choosepanel").panel("close");
        queryData();
    }

    //初始化搜索属性
    function initializeSearchProp() {
        if('<%=Request["CategoryId"] %>' == '') return;
        else return; //暂时没有使用该功能
        

        $('.searchpropcontainer').executeCommand({ successCallBack: function (result, totalCount) {
            $('.searchpropcontainer').searchPropHandler({
                glist: result.List,
                //分组模板
                groupTemplate: '<div data-role="collapsible" sp_group="{id}">' +
                                '<h2><font>{name}</font><span class="selected_text">全部</span></h2>' +
                                 '<fieldset data-role="controlgroup" data-iconpos="right">{itemlist}</fieldset>' +
                            '</div>',
                //单选模板
                radioItemTemplate: '<input sp_item="{id}" name="sp_{gid}" id="sp_item_{id}" value="{id}" type="radio">' +
                            '<label for="sp_item_{id}">{name}</label>',

                //多选模板
                checkboxItemTemplate: '<input sp_item="{id}" name="sp_{gid}" id="sp_item_{id}" value="{id}" type="checkbox">' +
                            '<label for="sp_item_{id}">{name}</label>'
            });
            if (result.List.length > 0) { $('.choosebtn').show() };
        }
        }, 'Pub.LoadSearchPropList', { CategoryId: '<%=Request["CategoryId"] %>' });
    }

    //导航更多
            function showlist(){
                $('.ui-content').css('min-height',$(window).height());
                $('.storedefault .navBar .others').css('height',$(document).height());
                var isShow = true;
                $(document).click(function(){
                     $('.storedefault .navBar .others').hide();
                     isShow = true;
                });
                $('.storedefault .navBar ul li:last-child').click(function(){
                if(isShow){
                    $('.storedefault .navBar .others').show();
                    isShow = false;
                }else{
                    $('.storedefault .navBar .others').hide();
                    isShow = true
                }
                event.stopPropagation();
                });
                $('.storedefault .navBar .others ol').click(function(){
                    event.stopPropagation();
                });
            }
    $(function () {
        queryData();
//        initializeSearchProp(); 暂时没有启用
        showlist();

    });
	
    $(function () {
        $(window).scroll(function () {
            //当内容滚动到底部时加载新的内容

            if ($(this).scrollTop() + $(window).height() + 20 >= $(document).height() && $(this).scrollTop() > 20) {
                //当前要加载的页码
                $('#btnMore').click();
            }
        });
    });

    window.onresize = function(){
        console.log(1);
        var tmpsId = <%= Request["tmps"] == null ? "2" : Request["tmps"] %>
        if(tmpsId == "2"){
            imgHW4tmps2 =  ($('#searchResult').width() -10 )/2;
            $('.pimg>img.pimgc').width(imgHW4tmps2);
            $('.pimg>img.pimgc').height(imgHW4tmps2);
    }};
</script>
</asp:Content>
